<template>
  <div class="soundComments" v-if="hot_comments.comment">
      <div class="recommend-content">
        <Comment
          v-for="item in hot_comments.comment.Datas"
          :key="item.id"
          :item="item"
        ></Comment>
        <span class="more">更多热门评论 ></span>
      </div>
      <Comment
        v-for="item in comments.comment.Datas"
        :key="item.id"
        :item="item"
      ></Comment>
  </div>
  <ThumbnailLoading v-else></ThumbnailLoading>
</template>

<script>
import ThumbnailLoading from "components/public/ThumbnailLoading"
import Comment from "components/comment/Comment"
import { post } from "util/http"
export default {
  data(){
    return {
      comments:{},
      hot_comments:{}
    }
  },
  components:{
    Comment,
    ThumbnailLoading
  },
  async mounted(){
    let result=await post({
      url:"/ajax/site/getcomment",
      params:{
        order:1,
        pagesize:10,
        type:1,
        eId:this.$route.params.soundid,
        p:1
      }
    })
    this.comments=result.successVal
    let hot_result=await post({
      url:"/ajax/site/getcomment",
      params:{
        order:3,
        pagesize:4,
        type:1,
        eId:this.$route.params.soundid,
        p:1
      }
    })
    this.hot_comments=hot_result.successVal
  }
}
</script>

<style lang="stylus" scoped>
  .more
    position relative
    color #c14a3f
    display block
    height .2rem
    margin .2rem 0
    font-size .14rem
    text-align center
    &:before,&:after
      content ""
      display block
      position absolute
      width calc(50% - 0.6rem)
      top 0.09rem
      border-bottom 1px solid #e0e0e0
    &:before
      left 0
    &:after 
      right 0
</style>